<template>
  <div class="sidebar sidebarBox">
    <el-scrollbar style="height:100%;position:fixed;left:0;top:71px;">
      <el-menu mode="vertical"
               class="el-menu-vertical-demo"
               :collapse="collapse"
               :default-active="$route.path"
               background-color="#324057"
               text-color="#fff">
        <div class="wrapper"
             ref="wrapper">
          <Menu :layoutData="layoutData" />
        </div>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import bus from "../common/bus";
import Menu from "./Menu";
import Bscroll from "better-scroll";
import { mapGetters } from "vuex";
// @ is an alias to /src
export default {
  name: "LeftMenu",
  data () {
    return {
      collapse: false,
      layoutData: [
        {
          'id': 1,
          'titile': '商品',
          'url': '',
          'icon': '',
          'children': [
            {
              'id': 2,
              'titile': '商品列表',
              'url': '/goods/goodsList',
              'icon': '',
            },
            {
              'id': 3,
              'titile': '品牌管理',
              'url': '/goods/brandList',
              'icon': '',
            },
            {
              'id': 4,
              'titile': '商品模板',
              'url': '/goods/mouldList',
              'icon': '',
            }
          ]
        },
        {
          'id': 5,
          'titile': '用户',
          'url': '/goods/mouldList',
          'icon': '', 
          'children': [
            {
              'id': 6,
              'titile': '用户管理',
              'url': '/user/userList',
              'icon': '',
            },
            {
              'id': 7,
              'titile': '商家管理',
              'url': '/store/storeList',
              'icon': '',
            },
            {
              'id': 9,
              'titile': '商家审核',
              'url': '/store/checkList',
              'icon': '',
            },
            {
              'id': 8,
              'titile': '配送员列表',
              'url': '/store/posterList',
              'icon': '',
            }
          ]
        }
      ]
    };
  },
  components: {
    Menu
  },
  computed: {
    // layoutData () {
    //   return this.$store.getters.layoutData;
    //   return this.layoutData
    // },
    // jobId() {
    //   return this.$store.getters.jobId;
    // }
    // ...mapGetters(["layoutData", "jobId"])
  },
  methods: {
    initScroll () {
      this.scroll = new Bscroll(this.$refs.wrapper, {});
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initScroll();
    });
  },
  created () {
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });
  }
};
</script>

<style>
/* // .menu_page {
//   position: fixed;
//   top: 71px;
//   left: 0;
//   min-height: 100%;
//   background-color: #324057;
//   z-index: 99;
// }
// .sidebar {
//   position: relative;
//   overflow: hidden;
// }
// .wrapper {
//   position: absolute;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   width: 100%;
//   height: 100%;
//   min-height: 500px;
//   overflow: hidden;
// }
// .sidebar::-webkit-scrollbar {
//   width: 0;
// }

// .sidebar-el-menu:not(.el-menu--collapse) {
//   width: 250px;
// }

// .el-menu {
//   border: none;
//   z-index: 9999;
// }

// .fa-margin {
//   margin-right: 5px;
// }

// .el-menu-vertical-demo:not(.el-menu--collapse) {
//   width: 180px;
//   min-height: 400px;
// }

// .el-menu-vertical-demo {
//   width: 49px;
// }

// .el-submenu .el-menu-item {
//   min-width: 180px;
// }

// .hiddenDropdown,
// .hiddenDropname {
//   display: none;
// }

// a {
//   text-decoration: none;
// } */
.sidebarBox {
  height: 100%;
  position: fixed;
  left: 0px;
  top: 71px;
}
.sidebar {
  height: 100%;
}
.el-scrollbar__view {
  height: 100%;
}
.el-menu {
  height: 100%;
}
.wrapper {
  background-color: #324057;
  /* padding-bottom: 100px; */
}
</style>

